import { StyleSheet, Text, View, Dimensions } from "react-native";
import React from "react";
import { Entypo } from "@expo/vector-icons";
import { Feather } from "@expo/vector-icons";
import { TouchableOpacity } from "react-native-gesture-handler";

const LIST_ITEM_HEIGHT = 70;
const { width: SCREEN_WIDTH } = Dimensions.get("window");
const AudioListItemNodelete = ({
  audioTitle,
  onAudioPress,
  isPlaying,
  activeListItem,
  downloadAudio,
}) => {
  //获取文件名的第一个字
  const getThumbnailText = (filename) => filename[0];
  //渲染播放/暂停按钮
  const renderPlayPauseIcon = (isPlaying) => {
    if (isPlaying)
      return <Entypo name="controller-paus" size={24} color="#fff" />;
    return <Entypo name="controller-play" size={24} color="#fff" />;
  };

  return (
    <View style={styles.audioItem}>
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
        }}
      >
        <TouchableOpacity onPress={onAudioPress}>
          <View
            style={[
              styles.thumbnail,
              {
                backgroundColor: activeListItem ? "#D36E6C" : "#b6b8b9",
              },
            ]}
          >
            <Text style={styles.thumbnailText}>
              {activeListItem
                ? renderPlayPauseIcon(isPlaying)
                : getThumbnailText(audioTitle)}
            </Text>
          </View>
        </TouchableOpacity>

        <View style={{ marginLeft: 20 }}>
          <Text numberOfLines={1} style={styles.title}>
            {audioTitle}
          </Text>
        </View>
      </View>

      <TouchableOpacity
        onPress={() => {
          downloadAudio();
        }}
      >
        <Feather name="download" size={25} color="#4d4d4d" />
      </TouchableOpacity>
    </View>
  );
};

export default AudioListItemNodelete;

const styles = StyleSheet.create({
  audioItem: {
    width: SCREEN_WIDTH * 0.85,
    height: LIST_ITEM_HEIGHT,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingHorizontal: 20,
    backgroundColor: "white",
    borderRadius: 20,
    marginBottom: 20,
    // Shadow for iOS
    shadowOpacity: 0.5,
    shadowOffset: {
      width: 1,
      height: 15,
    },
    shadowRadius: 5,
    // Shadow for Android
    elevation: 2,
  },
  thumbnail: {
    height: 50,
    width: 50,
    backgroundColor: "#303d49",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 25,
  },
  thumbnailText: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#303d49",
  },

  title: {
    fontSize: 16,
    color: "#303d49",
  },
});
